<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix='sec' uri='http://www.springframework.org/security/tags'%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<script type="text/javascript" src="scripts/boot.js"></script>
<style type="text/css">
	.item{
		width: 95px;
		display: inline-block;
		margin-left: 5px;
	}
</style>
</head>
<body style="border: 0px; margin: 0px; padding: 0px;width: 100%;height: 100%">
	<div class="mini-toolbar" style="border-bottom:0;padding:0px;">
		<div id="splitter1" class="mini-splitter" vertical="true" style="width:100%;height: 70px">
		    <div class="splitterDiv" style="border: none;">
		        <table style="width:100%;">
					 <tr>
					    <td style="width:30%;">
					    	<span class="item">主叫号码：</span>
					    	<input id="callerNum" class="mini-textbox" emptyText="请输入主叫号码"  style="width:160px;"/>
					    </td>
					    <td style="width:30%;">
					    	<span class="item">被叫号码：</span>
					    	<input id="calledNum" class="mini-textbox" emptyText="请输入被叫号码"   style="width:160px;"/>
					    </td>
					    <td style="width:30%;">
					    	<span class="item">是否公开：</span>
					    	<input id="is_open" class="mini-combobox" emptyText="请选择..." nullItemText="全部" showNullItem="true" style="width:160px;" textField="text" valueField="id" data="[{ id: 1, text: '是' }, { id: 0, text: '否'}]"/>
					    </td>
					    <td style="display: inline-block;"><a class="mini-button" iconCls="icon-search" onclick="search()">查询</a></td>
					 </tr>
					 <tr>
					    <td style="width:30%;">
					    	<span class="item">中心：</span>
					    	<input id="cur_ser_center" showNullItem="true" emptyText="请选择..." nullItemText="全部" class="mini-combobox" style="width:160px;" textField="name" valueField="id" 
	        				onvaluechanged="onCenterChanged" url="sms_find_center.do" />
					    </td>
					    <td style="width:30%;">
					    	<span class="item">话务组：</span>
					    	<input id="cur_ser_group" class="mini-combobox" emptyText="请先选择中心" style="width:160px;" textField="name" valueField="id" 
        					onvaluechanged="onDeptChanged" />
					    </td>
					    <td style="width:30%;">
					    	<span class="item">坐席：</span>
					    	<input id="seat" class="mini-combobox" emptyText="请先选择话务组" style="width:160px;" textField="name" valueField="id"/>
					    </td>
					    <td style="display: inline-block;"><a href="javascript:showHq();">更多</a></td>
					 </tr>
				</table>
		    </div>
		    <div visible="false" class="splitterDiv" style="border: none;">
		        <table style="width:100%;">
					 <tr>
					 	<td style="width:30%;">
			                <span class="item">呼叫开始时间：</span>
			                <input id="startTime" class="mini-datepicker" emptyText="请选择..." style="width:160px;" format="yyyy-MM-dd H:mm:ss" timeFormat="H:mm:ss" showTime="true" allowInput="false" />
			            </td>
					 	<td style="width:30%;">
			                <span class="item">呼叫截止时间：</span>
			                <input id="endTime" class="mini-datepicker" emptyText="请选择..." style="width:160px;" format="yyyy-MM-dd H:mm:ss" timeFormat="H:mm:ss" showTime="true" allowInput="false"/>
			            </td>
					   	<td style="width:30%;">
					   		<span class="item">通话时长(大于)：</span>
					   		<input id="talkTimeMore" class="mini-textbox" emptyText="请输入通话时长(单位：秒)" style="width:160px;"/>
					   	</td>
					    <td style="display: inline-block;">&nbsp;</td>
					 </tr>
					 <tr>
					 	<td style="width:30%;">
			                <span class="item">通话时长(小于)：</span>
			                <input id="talkTimeLess" class="mini-textbox" emptyText="请输入通话时长(单位：秒)" style="width:160px;"/>
			            </td>
					    <td style="width:30%;" colspan="2">&nbsp;</td>
					    <td style="display: inline-block;"><a href="javascript:hideHq();">收起</a></td>
					 </tr>
				</table>
		    </div>        
		</div>
	</div>
	<div class="mini-toolbar" style="border-bottom:0;padding:0px;">
	    <table style="width:100%;">
	        <tr>
	            <td style="width:100%;">
	            	<sec:authorize url='/call_recording_open.do'>
	                <a class="mini-button" iconCls="icon-ok" onclick="setOpen()">批量设置公开</a>
	                </sec:authorize>
	                <sec:authorize url='/call_recording_cancel.do'>
	                <a class="mini-button" iconCls="icon-no" onclick="setCancel()">批量取消公开</a>
	                </sec:authorize>
	                <sec:authorize url='/call_recording_current_export.do'>
	                <a class="mini-button" iconCls="icon-download" onclick="exportCurrentData()">导出当前</a>
	                </sec:authorize>
	                <sec:authorize url='/call_recording_export.do'>
		            <a class="mini-button" iconCls="icon-download" onclick="exportData()">导出全部</a>      
		            </sec:authorize>
	            </td>
	        </tr>
	    </table>
	</div>
	<div class="mini-fit" >
		<div id="datagrid1" class="mini-datagrid" allowCellWrap="true"
			allowCellSelect="true" multiSelect="true"
		 	idField="id" pageSize="20" url="call_recording_view.do" style="width:100%;height:100%;">
			<div property="columns">
				<div type="indexcolumn"></div>
				<div type="checkcolumn"></div>
				<div field="callerNum" width="16%" headerAlign="center" align="center">主叫号码</div>
				<div field="calledNum" width="16%" headerAlign="center" align="center">被叫号码</div>
				<div field="seatName" width="13%" headerAlign="center" align="center">坐席</div>
				<div field="callTime" width="20%" headerAlign="center" allowSort="true" dateFormat="yyyy-MM-dd HH:mm:ss" align="center">呼叫时间</div>
				<div field="talkTime" width="10%" headerAlign="center" align="center">通话时长</div>
				<div field="isOpenText" width="15%" headerAlign="center" align="center">是否公开</div>
				<div width="10%" headerAlign="center" align="center" renderer="onActionRenderer">录音试听</div>
			</div>
		</div>
		
		<!--录音播放器 -->
		<embed id="audio2" src="scripts/wavplayer.swf?gui=mini&h=20&w=300&"
	        bgcolor="#ffffff"
	        width="0"
	        height="0"
	        allowScriptAccess="always"
	        type="application/x-shockwave-flash"
	    />
	</div>
<script type="text/javascript">
mini.parse();
var grid = mini.get("datagrid1");
grid.load();


function onActionRenderer(e) {
    var s = '<a href="javascript:audition()">试听</a> ';
    return s;
}

function getPlayer(pid) {
	var obj = document.getElementById(pid);
	if (obj.doPlay) return obj;
	for(i=0; i<obj.childNodes.length; i++) {
		var child = obj.childNodes[i];
		if (child.tagName == "EMBED") return child;
	}
}
//播放录音
function doPlay(fname) {
	var player = getPlayer("audio2");
	player.play(fname);
}

function audition() {
	var row = grid.getSelected();
	if(row.recordingFile){
		$.post("get_server_ip.do", function(data) {
			doPlay("http://" + data.serverIp + "/recordingfile/" + row.recordingFile);
		}, "json");
	}else{
		alert("录音文件错误，请重试！");
	}
}

function search() {
	var callerNum = mini.get("callerNum").getFormValue();
	var calledNum = mini.get("calledNum").getFormValue();
	var seat = mini.get("seat").getFormValue();
	var startTime = mini.get("startTime").getFormValue();
	var endTime = mini.get("endTime").getFormValue();
	var talkTimeLess = mini.get("talkTimeLess").getFormValue();
	var talkTimeMore = mini.get("talkTimeMore").getFormValue();
	var isOpen = mini.get("is_open").getValue();
    grid.load({ 
    	callerNum: callerNum ,
    	calledNum: calledNum ,
    	seat: seat ,
    	startTime: startTime ,
    	endTime: endTime ,
    	talkTimeLess: talkTimeLess ,
    	talkTimeMore: talkTimeMore,
    	isOpen: isOpen
    });
}

//导出全部
function exportData(){
	var callerNum = mini.get("callerNum").getFormValue();
	var calledNum = mini.get("calledNum").getFormValue();
	var seat = mini.get("seat").getFormValue();
	var startTime = mini.get("startTime").getFormValue();
	var endTime = mini.get("endTime").getFormValue();
	var talkTimeLess = mini.get("talkTimeLess").getFormValue();
	var talkTimeMore = mini.get("talkTimeMore").getFormValue();
	location.href="call_recording_export.do?callerNum="+callerNum+"&calledNum="+calledNum+"&seat="+seat+"&startTime="
			+startTime+"&endTime="+endTime+"&talkTimeLess="+talkTimeLess+"&talkTimeMore="+talkTimeMore; 
}

//导出当前页数据
function exportCurrentData() {
	var data =grid.getData();
	var ids = [];
	$.each(data , function(){
        ids.push(this.id);
    });
	 var id = ids.join(',');
	 location.href="call_recording_current_export.do?ids=" +id;
}
// 设置公开
function setOpen(){
	var rows = grid.getSelecteds();
	if(rows.length > 0){
		var arr = new Array();
	    $.each(rows,function(i,v){
	    	arr.push(v.id);
	    });
	    var rids = arr.join("-");
	    $.post("call_recording_open.do",{ids:rids},function(data){
	    	mini.showMessageBox({
	               title: "提示",
	               showModal:false,
	               iconCls: "mini-messagebox-info",
	               message: "修改成功",
	               timeout: 3000,
	               x: 'right',
	               y: 'bottom'
	           });
	   		grid.reload();
	    },"json");
	} else {
		mini.alert("请选择数据");
	}
}

//取消公开
function setCancel() {
	var rows = grid.getSelecteds();
	if(rows.length > 0){
		var arr = new Array();
	    $.each(rows,function(i,v){
	    	arr.push(v.id);
	    });
	    var rids = arr.join("-");
	    $.post("call_recording_cancel.do",{ids:rids},function(data){
	    	mini.showMessageBox({
	               title: "提示",
	               showModal:false,
	               iconCls: "mini-messagebox-info",
	               message: "修改成功",
	               timeout: 3000,
	               x: 'right',
	               y: 'bottom'
	           });
	   		grid.reload();
	    },"json");
	} else {
		mini.alert("请选择数据");
	}
}

function showHq(){
	var splitter1 = mini.get("splitter1");
	$("#splitter1").css("height","140px");
	splitter1.showPane("2");
}

function hideHq(){
	var splitter1 = mini.get("splitter1");
	$("#splitter1").css("height","70px");
	splitter1.hidePane("2");
}

function onDeptChanged(e) {
	var curSer = mini.get("seat");
	curSer.setValue("");
    var url = "sms_cur_ser.do?groupId=" + e.value;
    curSer.setUrl(url);
}

function onCenterChanged(e){
	var curSer = mini.get("seat");
	curSer.setValue("");
	var url = "sms_find_group.do?centerId=" + e.value;
	var curGroup = mini.get("cur_ser_group");
	curGroup.setValue("");
	curGroup.setUrl(url);
}
</script>
</body>
</html>